<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <input type="hidden" th:value= "${id} " id="id"  name="id" class="layui-input">
    <input type="hidden" id="pid"  name="pid" class="layui-input">

    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" value="1" title="头部菜单" lay-filter="radio-type" checked>
            <input type="radio" name="type" value="2" title="一级菜单" lay-filter="radio-type">
            <input type="radio" name="type" value="3" title="二级菜单" lay-filter="radio-type">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-inline">
            <input type="name" id="name" name="name" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item menu_pid">
        <div class="layui-form-label ">所属菜单</div>
        <div class="layui-input-inline">
            <input type="pidName" id="pidName" name="pidName" placeholder="请选择所属菜单" autocomplete="off" class="layui-input"
                   readonly="readonly" onclick="menusSelect()" style="background:#eeeeee!important">
        </div>
    </div>
    <div class="layui-form-item menu_url">
        <label class="layui-form-label ">接口URL</label>
        <div class="layui-input-inline">
            <input type="text" id="url" name="url" placeholder="请输入接口URL" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item menu_target">
        <label class="layui-form-label ">target</label>
        <div class="layui-input-inline">
            <input type="radio" name="target" value="_self" title="_self" checked>
            <input type="radio" name="target" value="_blank" title="_blank">
        </div>
    </div>
    <div class="layui-form-item menu_icon">
        <div class="layui-form-label">图标</div>
        <div class="layui-input-inline">
            <input type="text" id="iconPicker" name="icon" lay-filter="iconPicker" class="layui-input">
            <br/>
            <a id='reset_icon' onclick='resetIcon()' class="layui-btn  layui-btn-danger layui-btn-sm">重置</a>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-label">排序码</div>
        <div class="layui-input-inline">
            <input type="number" id="orderNum" name="orderNum" lay-verify="number" onkeyup="value=zhzs(this.value)"
                   placeholder="请输入排序码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否禁用</label>
        <div class="layui-input-inline">
            <input type="checkbox" id="status" name="status" lay-skin="switch" lay-filter="switch" lay-text="启用|禁用" checked>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
    <!--菜单树-->
    <div id="menuTree" style="display: none"></div>


</div>
</div>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script th:inline="none">

    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var form = layui.form;
    var iconPicker;
    var selectNode = null;
    var tree = layui.tree;
    var curIfr = parent.layer.getFrameIndex(window.name);

    window.onload = function (){
        var id = $("#id").val()
        if(!CoreUtil.isEmpty(id)){
            CoreUtil.sendGet('/sys/permission/'+id,null,function (res){
                $("[name=type][value="+res.data.type+"]").prop('checked', true);
                form.render("radio");
                switch (res.data.type){
                    case 1:
                        $(".menu_pid").hide();
                        $(".menu_url").hide();
                        $(".menu_target").hide();
                        $(".menu_icon").hide();
                        $("#name").val(res.data.name);
                        $("#orderNum").val(res.data.orderNum);
                        $("#pid").val(0);
                        iniCheckbox(res.data.status)
                        break;
                    case 2:
                        $(".menu_pid").show();
                        $(".menu_url").hide();
                        $(".menu_target").show();
                        $(".menu_icon").show();
                        $("#pid").val(res.data.pid);
                        $("#name").val(res.data.name);
                        $("#pidName").val(res.data.pidName)
                        $("[name=target][value="+res.data.target+"]").prop('checked', true);
                        //重新渲染单选框
                        form.render("radio");
                        iconPicker.checkIcon('iconPicker', res.data.icon);
                        $("input[name='icon']").attr("value",res.data.icon)
                        $("#orderNum").val(res.data.orderNum);
                        initTree(res.data.id);
                        iniCheckbox(res.data.status);
                        break;
                    case 3:
                        $(".menu_pid").show();
                        $(".menu_url").show();
                        $(".menu_target").hide();
                        $(".menu_icon").hide();
                        $("#pid").val(res.data.pid);
                        $("#name").val(res.data.name);
                        $("#pidName").val(res.data.pidName)
                        $("#orderNum").val(res.data.orderNum);
                        $("#url").val(res.data.url);
                        initTree(res.data.id);
                        iniCheckbox(res.data.status);
                        break;
                }
            })
        }else{
            $(".menu_pid").hide();
            $(".menu_url").hide();
            $(".menu_target").hide();
            $(".menu_icon").hide();
            $("#status").attr('checked', 'checked');
            $("#status").attr('type', 'hidden').val(1);
            var x = document.getElementsByClassName("layui-unselect layui-form-switch");
            x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
            var d = document.getElementsByTagName('em')[0];
            d.firstChild.nodeValue = '启用';
            $("#pid").val(0);
            initTree("");
        }
    };

    layui.config({
        base: '/layui-ext/'
    }).extend({
        iconPicker: 'icon/iconPicker'
    }).use(["iconPicker"],function (){
        iconPicker = layui.iconPicker;

        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            }
        });
    });

    function zhzs(value) {

        value = value.replace(/[^\d]/g, '');
        if ('' != value) {
            value = parseInt(value);
        }
        return value;
    }

    function iniCheckbox(value){
        if (value == 1) {
            $("#status").attr('checked', 'checked');
            $("#status").attr('type', 'hidden').val(1);
            var x = document.getElementsByClassName("layui-unselect layui-form-switch");
            x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
            var d = document.getElementsByTagName('em')[0];
            d.firstChild.nodeValue = '启用';
        } else {
            $("#status").attr('type', 'hidden').removeAttr("checked").val(0);
            var x = document.getElementsByClassName("layui-unselect layui-form-switch");
            x[0].setAttribute("class", "layui-unselect layui-form-switch");
            var d = document.getElementsByTagName('em')[0];
            d.firstChild.nodeValue = '禁用';
        }
    }

    function menusSelect(){
        layer.open({
            type: 1,
            // skin: 'layui-layer-molv',
            title: "选择菜单",
            area: ['80%', '80%'],
            shade: 0,
            shadeClose: false,
            content: jQuery("#menuTree"),
            btn: ['确定', '取消'],
            yes: function (index) {
                if (selectNode.data != null) {
                    $("#pid").val(selectNode.data.id);
                    $("#pidName").val(selectNode.data.title);
                }
                layer.close(index);
            }
        });
    };

    function resetIcon(){
        iconPicker.checkIcon('iconPicker', '');
        $("input[name='icon']").attr("value","")
    }

    var initTree = function (id) {
        var param = {permissionId: id}
        CoreUtil.sendGet("/sys/permission/tree", param, function (res) {
            loadDeptTree(res.data);
        });
    };

    var loadDeptTree = function (data) {
        tree.render({
            elem: '#menuTree'
            , data: data
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , click: function (obj) {
                selectNode = obj;
                layer.msg(JSON.stringify(selectNode.data.title));
            }
        });
    };

    //监听菜单栏类型管理选项
    form.on('radio(radio-type)', function (data) {
        switch (parseInt(data.value) ){
            case 1:
                $(".menu_pid").hide();
                $(".menu_url").hide();
                $(".menu_target").hide();
                $(".menu_icon").hide();
                $("#pid").val(0);
                break;
            case 2:
                $(".menu_pid").show();
                $(".menu_url").hide();
                $(".menu_target").show();
                $(".menu_icon").show();
                initTree("");
                break;
            case 3:
                $(".menu_pid").show();
                $(".menu_url").show();
                $(".menu_target").hide();
                $(".menu_icon").hide();
                initTree("");
                break;
        }
    });

    //监听提交
    form.on('submit(saveBtn)', function (data) {
        if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
            CoreUtil.sendPost("/sys/permission", data.field, function (res) {
                if(res.code == 0){
                    //跳出提示
                    parent.layer.msg(res.msg);
                    //刷新表格
                    parent.location.reload();
                    //关闭窗口
                    parent.layer.close(curIfr);
                }else{
                    layer.msg(res.msg);
                }
            });
        } else {
            CoreUtil.sendPut("/sys/permission", data.field, function (res) {
                if(res.code == 0){
                    //跳出提示
                    parent.layer.msg(res.msg);
                    //刷新表格
                    parent.location.reload();
                    //关闭窗口
                    parent.layer.close(curIfr);
                }else{
                    layer.msg(res.msg);
                }
            });
        }
        return false;
    });

</script>
</body>
</html>